<template>
  <el-dialog v-bind="config__" :before-close="cancel" show-close>
    <template #default>
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="下单日购买限制" name="payDayLimit">
          <el-form pt="1rem" :model="data__.purchaseQuantiyAtMost" label-width="200px"
                   :disabled="status__.DIALOG_STATUS === options__.DIALOG_TYPE.DETAIL"
                   v-loading="config__.dialogLoading">
            <!-- 规则：1.整数 2.范围1 ~ 10000000 -->
            <el-form-item label="每个订单最大购买数量" prop="purchaseQuantiyAtMost">
              <SafeInputNumber style="width: 100%" v-model="data__.payDayLimit.purchaseQuantiyAtMost" :min="1"
                          :max="10000000" :precision="0" placeholder="请填写每个订单最大购买数量"/>
              <form-item-tip>每个订单限制购买的数量，数值必须大于0</form-item-tip>
            </el-form-item>

            <!-- 规则：1.整数 2.范围1 ~ 10000000 -->
            <el-form-item label="每个订单最小购买数量" prop="purchaseQuantiyAtLeast">
              <SafeInputNumber style="width: 100%" v-model="data__.payDayLimit.purchaseQuantiyAtLeast" :min="1"
                          :max="10000000" :precision="0" placeholder="请填写每个订单最小购买数量"/>
              <form-item-tip>起购数量不填时默认为1，数值必须大于1</form-item-tip>
            </el-form-item>

            <el-form-item label="下单日每个ID最大购买数量" prop="limitIdDays">
              每个ID每
              <!-- 规则：1.整数 2.范围1 ~ 365 -->
              <SafeInputNumber style="width: 200px; margin: 0 10px;" v-model="data__.payDayLimit.limitIdDays" :min="1"
                          :max="365" :precision="0"/>
              天，限购
              <!-- 规则：1.整数 2.范围1 ~ 10000000 -->
              <SafeInputNumber style="width: 200px; margin-left: 14px;" v-model="data__.payDayLimit.limitIdNum"
                          :min="1" :max="10000000" :precision="0"/>
              <form-item-tip>限购天数结束，限购数量恢复，对购买人所处下单日进行限制，数量必须大于0，天数小于等于365</form-item-tip>
            </el-form-item>

            <!-- 规则：1.来源地限制开关开启后，areaCodes字段必填 -->
            <el-form-item label="来源地限制" prop="areaCodes">
              <MultipleRegionSelect :switch-value.sync="data__.payDayLimit.areaSwitch"
                                    v-model="data__.payDayLimit.areaCodes"/>
              <form-item-tip>多选，选择上级客源地，下级客源地全部受限。</form-item-tip>
            </el-form-item>

            <!-- 规则：最早购买时间 < 最晚购买时间 -->
            <el-form-item label="下单日最早购买时间" prop="payBeginTime">
              <el-time-picker
                v-model="data__.payDayLimit.payBeginTime"
                placeholder="请选择下单日最早购买时间"
                value-format="HH:mm:ss"
                style="width: 100%"
                :picker-options="{
                  selectableRange: `00:00:00 - ${ data__.payDayLimit.payEndTime || '23:59:59' }`
                }"
              />
              <form-item-tip>下单日最早购票时间，早于该时间不可下单购票</form-item-tip>
            </el-form-item>

            <!-- 规则：最晚购买时间 > 最早购买时间 -->
            <el-form-item label="下单日最晚购买时间" prop="payEndTime">
              <el-time-picker
                v-model="data__.payDayLimit.payEndTime"
                placeholder="请选择下单日最晚购买时间"
                value-format="HH:mm:ss"
                style="width: 100%"
                :picker-options="{
                  selectableRange: `${ data__.payDayLimit.payBeginTime || '00:00:00' } - 23:59:59`
                }"
              />
              <form-item-tip>下单日最晚购票时间，晚于该时间不可下单购票</form-item-tip>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="游玩日预订限制" name="tripDayLimit">
          <el-form :model="data__.tripDayLimit" :disabled="status__.DIALOG_STATUS === options__.DIALOG_TYPE.DETAIL"
                   label-width="200px">
            <!-- 规则：当是场次票时，需要禁用改选项 -->
            <el-form-item label="游玩日当日票最晚购买时间" prop="latestPayTime">
              <el-time-picker
                v-model="data__.tripDayLimit.latestPayTime"
                value-format="HH:mm:ss"
                placeholder="请选择游玩日当日票最晚购买时间"
                style="width: 100%"
              />
              <form-item-tip>晚于该时间不可购买游玩日当日票。不用提前预定时有效。按场次购票时，不可设置该项。预订当日之后的票不受限制</form-item-tip>
            </el-form-item>

            <!-- 规则：1.正整数，范围1 ~ 7 -->
            <el-form-item label="提前预订天数" prop="aheadDays" verify>
              <SafeInputNumber style="width: 100%" v-model="data__.tripDayLimit.aheadDays" :min="0" :max="7"
                          :precision="0" placeholder="请填写提前预订天数"/>
              <form-item-tip>0天-7天，填写0时可在游玩日预订当日票。</form-item-tip>
            </el-form-item>

            <!-- 规则：1.多选  2.只能选择当日及之后的日期 3. 只显示当日及之后的日期，过期的需要过滤 -->
            <el-form-item label="游玩日不可预订日期" prop="unavailableDates">
              <el-date-picker
                v-model="getUnavailableDates"
                type="dates"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="请选择不可预订日期"
                :picker-options="{ disabledDate: time => $dayjs(time).isBefore($dayjs().format('YYYY-MM-DD')) }"
              />
              <form-item-tip>多选，选中后的固定日期，不可预订</form-item-tip>
            </el-form-item>

            <!-- 规则：1.默认不全选 2.选中置灰 -->
            <el-form-item label="游玩日不可预订周期" prop="unavailablePeriod">
              <WeekTimePicker v-model="data__.tripDayLimit.unavailablePeriod" type="info"></WeekTimePicker>
              <form-item-tip>多选，选中后的固定星期几，不可预订</form-item-tip>
            </el-form-item>

            <!-- 规则：1. 多选 -->
            <el-form-item label="游玩日不可预订月份" prop="unavailableMonth">
              <MonthTimePicker v-model="data__.tripDayLimit.unavailableMonth"></MonthTimePicker>
              <form-item-tip>多选，选中后的固定月份，不可预订</form-item-tip>
            </el-form-item>

            <!-- 规则：1.整数 2. 范围：1 ~ 10000000 -->
            <el-form-item label="游玩日每个ID最大预订数量" prop="idMaxNumber">
              每个ID每个游玩日，限购
              <SafeInputNumber style="width: 390px; margin-left: 10px;" v-model="data__.tripDayLimit.idMaxNumber"
                          :min="1" :max="10000000" :precision="0"/>
              <form-item-tip>该限制对游玩日进行限制，数值必须大于0</form-item-tip>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="预订人身份证限制" name="purchaserSetting">
          <el-form :model="data__.purchaserSetting" :disabled="status__.DIALOG_STATUS === options__.DIALOG_TYPE.DETAIL"
                   label-width="240px">
            <!-- 关联：游客必须包含预订人字段是依赖于预订人实名制，预订人实名制关闭时，游客必须包含预订人字段也需要关闭  -->
            <el-form-item label="预订人实名制" prop="needRealName">
              <el-switch
                v-model="data__.purchaserSetting.needRealName"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#909399"
                @change="value => {
                  if (value === 0) {
                    $set(data__.visitorSetting, 'includePurchaser', 0)
                    $set(data__.purchaserSetting, 'limitSex', 0)
                    $set(data__.purchaserSetting, 'ageCalculationType', 0)
                    $set(data__.purchaserSetting, 'limitAgeRanges', undefined)
                    $set(data__.purchaserSetting, 'limitAreaCodes', undefined)
                    $set(data__.purchaserSetting, 'limitCardDays', undefined)
                    $set(data__.purchaserSetting, 'limitCardNum', undefined)
                    $set(data__.purchaserSetting, 'limitTripMaxNum', undefined)
                  }
                }"
              />
              <form-item-tip>开启后预定人必须填入身份证号，如果对接票务系统，需要和票务系统限制相同</form-item-tip>
            </el-form-item>

            <!-- 规则：1. 单选radio组 -->
            <!-- 关联：1.预订人实名制开启才能设置 -->
            <el-form-item label="预订人性别限制" prop="limitSex">
              <el-radio-group :disabled="data__.purchaserSetting.needRealName === 0"
                              v-model="data__.purchaserSetting.limitSex">
                <el-radio :label="0">无限制</el-radio>
                <el-radio :label="1">仅限女士</el-radio>
                <el-radio :label="2">仅限男士</el-radio>
              </el-radio-group>
              <form-item-tip>预订人实名制开启后才可以设置</form-item-tip>
            </el-form-item>

            <!-- 规则：1. 单选radio组 -->
            <!-- 关联：1.预订人实名制开启才能设置 2.ageCalculationType为不限制年龄时需要清空limitAgeRanges数据  -->
            <el-form-item label="预订人年龄计算方式" prop="ageCalculationType">
              <el-radio-group
                class="ageCalculationType"
                :disabled="data__.purchaserSetting.needRealName === 0"
                v-model="data__.purchaserSetting.ageCalculationType"
                @change="value => {
                  if (value === 0) {
                    $set(data__.purchaserSetting, 'limitAgeRanges', undefined)
                  }
                }"
              >
                <el-radio :label="0">不限制年龄</el-radio>
                <el-radio :label="1">购买日，生日当天计入年龄</el-radio>
                <el-radio :label="2">购买日，生日当天不计入年龄</el-radio>
                <el-radio :label="3">游玩日，生日当天可计入年龄</el-radio>
                <el-radio :label="4">游玩日，生日当天不计入年龄</el-radio>
                <el-radio :label="5">购买日，生日当年计入年龄</el-radio>
                <el-radio :label="6">购买日，生日当年不计入年龄</el-radio>
                <el-radio :label="7">游玩日，生日当年可计入年龄</el-radio>
                <el-radio :label="8">游玩日，生日当年不计入年龄</el-radio>
              </el-radio-group>
              <form-item-tip>预订人实名制开启后才可以设置</form-item-tip>
            </el-form-item>

            <!-- 规则：1.整数 2.范围0 ~ 999 3. 开始年龄 / 结束年龄每一项必须完整 -->
            <!-- 关联：1.联系人实名制开启 2.预订人年龄计算方式：不是不限制年龄 同时满足时状态变为非禁用  -->
            <el-form-item label="预订人限制购买年龄范围" prop="limitAgeRanges">
              <AgeLimit
                ref="purchaserLimitAge"
                v-model="data__.purchaserSetting.limitAgeRanges"
                :disabled="data__.purchaserSetting.needRealName === 0 || data__.purchaserSetting.ageCalculationType === 0"
              />
              <form-item-tip>最小年龄0，最大年龄为999。预订人如果在所填年龄范围内可购买，联系人实名制开启后才有效</form-item-tip>
            </el-form-item>

            <!-- 关联：预订人实名制开启才能设置 -->
            <el-form-item label="根据预订人身份证地区限制购买" prop="limitAreaCodes">
              <MultipleRegionSelect
                v-model="data__.purchaserSetting.limitAreaCodes"
                :disabled="data__.purchaserSetting.needRealName === 0"
                :switchShow="false"
              />
              <form-item-tip>多选，选择上级地区后，下级地区全部受限。预订人实名制开启后才可以设置</form-item-tip>
            </el-form-item>

            <!-- 关联：预订人实名制开启才能设置 -->
            <el-form-item label="预订人身份证下单日最大购买数量" prop="limitCardDays">
              每个身份证每
              <!-- 规则：1.整数 2.范围1 ~ 365 -->
              <SafeInputNumber :disabled="data__.purchaserSetting.needRealName === 0"
                          style="width: 180px; margin: 0 8px;" v-model="data__.purchaserSetting.limitCardDays"
                          :min="1" :max="365" :precision="0"/>
              天，限购
              <!-- 规则：1.整数 2.范围1 ~ 10000000 -->
              <SafeInputNumber :disabled="data__.purchaserSetting.needRealName === 0" style="width: 170px;"
                          v-model="data__.purchaserSetting.limitCardNum" :min="1" :max="10000000"
                          :precision="0"/>
              <form-item-tip>限购天数结束，限购数量恢复，该限制对下单日进行限制，数值必须大于0，天数小于等于365。预订人实名制开启后才可以设置</form-item-tip>
            </el-form-item>

            <!-- 规则：1.整数 2.范围1 ~ 10000000 -->
            <!-- 关联：预订人实名制开启才能设置 -->
            <el-form-item label="预订人身份证游玩日最大购买数量" prop="limitTripMaxNum">
              每个身份证每个游玩日，限购
              <SafeInputNumber
                v-model="data__.purchaserSetting.limitTripMaxNum"
                :disabled="data__.purchaserSetting.needRealName === 0"
                style="width: 330px;"
                :min="1"
                :max="10000000"
                :precision="0"
              />
              <form-item-tip>该限制对所选游玩日进行限制，数值必须大于0。预订人实名制开启后才可以设置</form-item-tip>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="游客身份证限制" name="visitorSetting">
          <el-form :model="data__.visitorSetting" :disabled="status__.DIALOG_STATUS === options__.DIALOG_TYPE.DETAIL"
                   label-width="240px">
            <!-- 关联：游客必须包含预订人字段是依赖于游客实名制，游客实名制关闭时，游客必须包含预订人字段也需要关闭  -->
            <el-form-item label="游客实名制" prop="needRealName">
              <el-switch
                v-model="data__.visitorSetting.needRealName"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#909399"
                @change="value => {
                  if (value === 0) {
                    $set(data__.visitorSetting, 'limitSex', 0)
                    $set(data__.visitorSetting, 'ageCalculationType', 0)
                    $set(data__.visitorSetting, 'limitAgeRanges', undefined)
                    $set(data__.visitorSetting, 'limitAreaCodes', undefined)
                    $set(data__.visitorSetting, 'canAreaCodes', undefined)
                    $set(data__.visitorSetting, 'limitCardDays', undefined)
                    $set(data__.visitorSetting, 'limitCardNum', undefined)
                    $set(data__.visitorSetting, 'limitTripMaxNum', undefined)
                    $set(data__.visitorSetting, 'includePurchaser', 0)
                  }
                }"
              />
              <form-item-tip>开启后游客信息必须填入身份证号，如果对接票务系统，需要和票务系统限制相同</form-item-tip>
            </el-form-item>

            <el-form-item label="游客性别限制" prop="limitSex">
              <el-radio-group :disabled="data__.visitorSetting.needRealName === 0"
                              v-model="data__.visitorSetting.limitSex">
                <el-radio :label="0">无限制</el-radio>
                <el-radio :label="1">仅限女士</el-radio>
                <el-radio :label="2">仅限男士</el-radio>
              </el-radio-group>
              <form-item-tip>游客实名制后才可设置</form-item-tip>
            </el-form-item>

            <el-form-item label="游客年龄计算方式" prop="ageCalculationType">
              <el-radio-group
                class="ageCalculationType"
                :disabled="data__.visitorSetting.needRealName === 0"
                v-model="data__.visitorSetting.ageCalculationType"
                @change="value => {
                  if (value === 0) {
                    $set(data__.visitorSetting, 'limitAgeRanges', undefined)
                  }
                }"
              >
                <el-radio :label="0">不限制年龄</el-radio>
                <el-radio :label="1">购买日，生日当天计入年龄</el-radio>
                <el-radio :label="2">购买日，生日当天不计入年龄</el-radio>
                <el-radio :label="3">游玩日，生日当天可计入年龄</el-radio>
                <el-radio :label="4">游玩日，生日当天不计入年龄</el-radio>
                <el-radio :label="5">购买日，生日当年计入年龄</el-radio>
                <el-radio :label="6">购买日，生日当年不计入年龄</el-radio>
                <el-radio :label="7">游玩日，生日当年可计入年龄</el-radio>
                <el-radio :label="8">游玩日，生日当年不计入年龄</el-radio>
              </el-radio-group>
              <form-item-tip>游客实名制后才可设置</form-item-tip>
            </el-form-item>

            <el-form-item label="游客限制购买年龄范围" prop="limitAgeRanges">
              <AgeLimit
                ref="visitorLimitAge"
                v-model="data__.visitorSetting.limitAgeRanges"
                :disabled="data__.visitorSetting.needRealName === 0 || data__.visitorSetting.ageCalculationType === 0"
              />
              <form-item-tip>最小年龄0，最大年龄为999。预订人如果在所填年龄范围内可购买，游客实名制开启后才有效</form-item-tip>
            </el-form-item>

            <!-- <div>data__.visitorSetting.canAreaCodes={{data__.visitorSetting.canAreaCodes}}</div>
            <div>data__.visitorSetting.canAreaName={{data__.visitorSetting.canAreaName}}</div> -->
            <!-- "游客非实名制 或者 游客身份证不可购票地区"有值时，置灰不可用-->
            <el-form-item label="游客身份证可购票地区" prop="canAreaCodes">
              <!-- <MultipleRegionSelect
               :switch-value="data__.visitorSetting.limitAreaCodes? 0 : 1"
               :switch-show="false"
               :level="3"
               :ccdProps="{ checkStrictly: false }"
               v-model="data__.visitorSetting.canAreaCodes"
             /> -->
              <MultipleRegionSelect
                v-model="data__.visitorSetting.canAreaCodes"
                placeholder="请选择游客身份证可购票地区"
                :disabled="data__.visitorSetting.needRealName === 0 || (data__.visitorSetting.limitAreaCodes && data__.visitorSetting.limitAreaCodes.length>0)  ? true : false"
                :switchShow="false"
              />
              <form-item-tip>1、游客身份证可购票地区和游客身份证不可购票地区只能二选一，互斥;2、游客身份证可购买地区多选，选择上级地区全部受限；3、游客实名制开启后才可设置</form-item-tip>
            </el-form-item>

            <!-- <div>data__.visitorSetting.needRealName={{data__.visitorSetting.needRealName}}</div>
            <div>data__.visitorSetting.limitAreaCodes={{data__.visitorSetting.limitAreaCodes}}</div> -->
            <!-- 游客非实名制 或者 游客身份证可购票地区 有值时，置灰不可用-->
            <el-form-item label="游客身份证不可购票地区" prop="limitAreaCodes">
              <!-- <MultipleRegionSelect
                :switch-value="data__.visitorSetting.needRealName === 0 || data__.visitorSetting.canAreaCodes ? 0 : 1"
                :switch-show="false"
                :level="3"
                :ccdProps="{ checkStrictly: false }"
                v-model="data__.visitorSetting.limitAreaCodes"
              /> -->
              <MultipleRegionSelect
                v-model="data__.visitorSetting.limitAreaCodes"
                placeholder="请选择游客身份证不可购票地区"
                :disabled="data__.visitorSetting.needRealName === 0 || (data__.visitorSetting.canAreaCodes && data__.visitorSetting.canAreaCodes.length>0 ) ? true : false"
                :switchShow="false"
              />
              <form-item-tip>1、游客身份证可购票地区和游客身份证不可购票地区只能二选一，互斥; 2、游客身份证不可购买地区多选，选择上级地区全部受限；3、游客实名制开启后才可设置</form-item-tip>
            </el-form-item>

            <el-form-item label="游客身份证下单日最大购买数量" prop="limitCardDays">
              每个身份证每
              <!-- 规则：1.整数 2.范围1 ~ 365 -->
              <SafeInputNumber :disabled="data__.visitorSetting.needRealName === 0"
                          style="width: 180px; margin: 0 8px;" v-model="data__.visitorSetting.limitCardDays"
                          :min="1" :max="365" :precision="0"/>
              天，限购
              <!-- 规则：1.整数 2.范围1 ~ 10000000 -->
              <SafeInputNumber :disabled="data__.visitorSetting.needRealName === 0" style="width: 170px;"
                          v-model="data__.visitorSetting.limitCardNum" :min="1" :max="10000000" :precision="0"/>
              <form-item-tip>限购天数结束，限购数量恢复，对购买人所处下单日进行限制，数量必须大于0，天数小于等于365。游客实名制开启后才可设置</form-item-tip>
            </el-form-item>

            <el-form-item label="游客身份证游玩日最大购买数量" prop="limitTripMaxNum">
              每个身份证每个游玩日，限购
              <SafeInputNumber
                v-model="data__.visitorSetting.limitTripMaxNum"
                :disabled="data__.visitorSetting.needRealName === 0"
                style="width: 330px;"
                :min="1"
                :max="10000000"
                :precision="0"
              />
              <form-item-tip>该限制对游玩日进行限制，数值必须大于0。游客实名制开启后才可设置</form-item-tip>
            </el-form-item>

            <el-form-item label="游客必须包含预订人" prop="includePurchaser">
              <el-switch :disabled="!(data__.visitorSetting.needRealName && data__.purchaserSetting.needRealName)"
                         v-model="data__.visitorSetting.includePurchaser" :active-value="1" :inactive-value="0"
                         active-color="#13ce66" inactive-color="#909399"/>
              <form-item-tip>开启后，游客必须包含预订人，只有游客实名制和预订人实名制同时开启后才可设置</form-item-tip>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </template>

    <template #footer v-if="!isPlatFormUser">
      <el-button @click="config__.visible = false">取消</el-button>
      <el-button v-if="status__.DIALOG_STATUS !== options__.DIALOG_TYPE.DETAIL" type="primary" @click="onSubmit"
                 :loading="config__.confirmLoading">{{ config__.confirmLoading ? '更新中' : '确定' }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import ENUMS from '../../enums'
import MultipleRegionSelect from './MultipleRegionSelect.vue'
import AgeLimit from './AgeLimit.vue'
import MonthTimePicker from './MonthTimePicker.vue'
import WeekTimePicker from './WeekTimePicker.vue'

const DIALOG_TYPE = {
  CREATED: 'CREATED',
  DETAIL: 'DETAIL',
  UPDATE: 'UPDATE'
}

export default {
  components: { WeekTimePicker, MonthTimePicker, AgeLimit, MultipleRegionSelect },
  data () {
    return {
      activeName: 'payDayLimit',
      data__: {
        productId: undefined,
        payDayLimit: { // 下单日购买限制
          areaSwitch: 0, // 来源地，默认否 - 0
        },
        tripDayLimit: {}, // 游玩日购买限制
        purchaserSetting: { // 预订人身份证限制
          needRealName: 0, // 是否实名制, 默认非实名 - 0
          limitSex: 0, // 性别限制，默认无限制 - 0
          ageCalculationType: 0, // 年龄计算方式，默认不限制 - 0
        },
        visitorSetting: { //游玩人身份证限制
          needRealName: 0, // 是否实名制, 默认非实名 - 0
          limitSex: 0, // 性别限制，默认无限制 - 0
          ageCalculationType: 0, // 年龄计算方式，默认不限制 - 0
          includePurchaser: 0, // 游客必须包含预订人，默认否 - 0
        }
      },
      config__: {
        width: '800px',
        top: '8vh !important',
        visible: false,
        title: '限购设置（不设置时，无限制）',
        lockScroll: true,
        closeOnClickModal: false,
        customClass: 'el-ticket-purchase-limit',
        showClose: false,
        confirmLoading: false,
        dialogLoading: false,
        destroyOnClose: true
      },
      status__: {
        DIALOG_STATUS: DIALOG_TYPE.CREATED
      },
      options__: {
        DIALOG_TYPE
      }
    }
  },
  computed: {
    // 规则：永远显示当前日期之后的日期，已选的日期过期了需要过滤掉
    getUnavailableDates: {
      get () {
        if (!this.data__.tripDayLimit.unavailableDates) return undefined
        const now = this.$dayjs().format('YYYY-MM-DD')
        return this.data__.tripDayLimit.unavailableDates.filter(time => this.$dayjs(time).isSameOrAfter(now))
      },
      set (val) {
        this.$set(this.data__.tripDayLimit, 'unavailableDates', val)
      }
    },
    ...mapGetters([
      'isPlatFormUser',//是否平台用户
    ])
  },
  mounted () {
    this.$bus.on('ticket-purchase-limit:open', params => this.open(params, DIALOG_TYPE.CREATED))
    this.$bus.on('ticket-purchase-limit:create', params => this.open(params, DIALOG_TYPE.CREATED))
    this.$bus.on('ticket-purchase-limit:detail', params => this.open(params, DIALOG_TYPE.DETAIL))
    this.$bus.on('ticket-purchase-limit:update', params => this.open(params, DIALOG_TYPE.UPDATE))
  },
  destroyed () {
    this.$bus.off('ticket-purchase-limit:open')
    this.$bus.off('ticket-purchase-limit:create')
    this.$bus.off('ticket-purchase-limit:detail')
    this.$bus.off('ticket-purchase-limit:update')
  },
  methods: {
    open (id, type) {
      this.status__.DIALOG_STATUS = type
      this.data__.productId = id
      this.config__.visible = true
      this.config__.dialogLoading = true
      return this.$POST(ENUMS.ENUM_URL_PREFIX['1'] + '/queryPayLimitById', {
        id
      }).then(({ data }) => {
        this.data__ = data
      }).finally(_ => {
        setTimeout(() => { this.config__.dialogLoading = false }, 300)
      })
    },
    cancel () {
      this.config__.visible = false
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 事件 - 更新
    onSubmit () {
      // 产品id检查
      if (!this.data__.productId) {
        this.$swal('产品id不存在, 请检查')
        return
      }

      // 校验预订人限制购买年龄范围
      const res = this.$refs.purchaserLimitAge.validate('预订人限制购买年龄范围')
      if (!res.valid) {
        this.$swal.warning(res.msg)
        return
      }

      // 校验游客限制购买年龄范围
      const res1 = this.$refs.visitorLimitAge.validate('游客限制购买年龄范围')
      if (!res.valid) {
        this.$swal.warning(res.msg)
        return
      }

      // 票务产品更新限购设置
      this.config__.confirmLoading = true
      return this.$POST(ENUMS.ENUM_URL_PREFIX['1'] + '/updateLimitSetting', {
        ...this.data__ // 所有参数
      }).then(() => {
        this.$swal.success('更新限购设置成功')
        this.$bus.emit('table:refresh')
        this.cancel()
      }).finally(_ => {
        setTimeout(() => { this.config__.confirmLoading = false }, 300)
      })
    }
  }
}
</script>

<style lang="scss">
.el-ticket-purchase-limit .el-dialog__body {
  padding-top: 0;
}

.ageCalculationType .el-radio {
  width: 200px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.region-select {
  > .el-cascader {
    width: 100%;
  }
}
</style>
